<template>
	<view class="container">
		<view class="title">🌐 网络请求示例</view>
		<button type="primary" @click="getData">点击发送请求</button>
		<view class="result">
			<text>{{ result }}</text>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				items: {},
				result: '点击上方按钮获取数据'
			}
		},
		methods: {
			getData() {
				console.log("开始请求数据...");
				// 发起请求
				uni.request({
					url: "https://vending.neumooc.com/prod-api/api/machine/products", // 示例API
					method: 'GET',
					data: {
						"enterpriseId": 3,
						"id": 54,
						'machineNo': "49f4b29ccfcb4207a35e73327f7cb0b2"
					},
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},

					success: (res) => {
						console.log("请求成功！");
						console.log("完整响应对象：", res);
						console.log("响应数据部分：", res.data);
						this.items = res.data;
						// console.log(this.items["data"][0].productList[0].price)
						// 将结果显示在页面上
						this.result = JSON.stringify(res.data, null, 2);
						res.data.data.forEach((category) => {
							console.info(category.categoryName);
							category.productList.forEach((product) => {
								console.info(product.name, product.price);
							});
						});
					},
					fail: (err) => {
						console.error("请求失败：", err);
						this.result = '请求失败，请检查网络或URL';
					},
					complete: () => {
						console.log("请求已完成。");
					}
				});
			}
		}
	}
</script>
<style>
	.container {
		padding: 20rpx;
	}

	.title {
		font-size: 36rpx;
		font-weight: bold;
		margin-bottom: 40rpx;
	}

	.result {
		margin-top: 40rpx;
		font-size: 28rpx;
		color: #333;
		word-break: break-all;
	}
</style>